<template>
	<view class="">
		<view class="top-bg"></view>
		<view class="user-info">
			<view class="user-avatar">
				<view class="user-avatar-img">
					<image src="/static/8.jpg" mode="widthFix" style="width: 100%; height: 100%;"></image>
				</view>
			</view>
			<view class="user-name">
				<uni-title :title="userInfo.nickname" type="h2" align="center"></uni-title>
			</view>
		</view>
		<view class="user-top-nav1">
			<view style="background: repeating-linear-gradient(45deg,#ffe199,#ff941a);display: flex;"
				@click="handleClickTopNav('favorite')">
				<view class="bg2">

				</view>
				<image src="@/static/images/techer.png" mode="widthFix" style="width: 50px;"></image>
				<view style="margin: 5px 0 0 10px;line-height: 1.5;text-align: center;">
					<view style="color: #ffffff;">我的收藏</view>
					<view style="color: #ffffff;font-size: .7em;">我收藏的应用</view>
				</view>

			</view>

			<view style="background: repeating-linear-gradient(45deg,#a6f7ff,#21d7ff);display: flex;"
				@click="handleClickTopNav('bszn')">
				<view class="bg2">

				</view>
				<image src="@/static/images/person2.png" mode="widthFix" style="width: 50px;"></image>
				<view style="margin: 5px 0 0 10px;line-height: 1.5;text-align: center;">
					<view style="color: #ffffff;">办事指南</view>
					<view style="color: #ffffff;font-size: .7em;">办事指南汇总</view>
				</view>
			</view>

		</view>
		<view class="menu-list">
			<uni-list>
				<uni-list-item title="账户设置" note="" show-arrow="right" to="user-setting">
					<template #header>
						<uni-icons type="gear-filled" size="20" style="color: #1890ff;margin-right: 5px;"></uni-icons>
					</template>
				</uni-list-item>
				<uni-list-item show-arrow="right">
					<template v-slot:header>
						<uni-icons type="undo-filled" style="color: #848484;margin-right: 5px;"></uni-icons>
					</template>
					<template #body>
						<view style="font-size: .9rem;" @tap="handleClickTopNav('logout')">退出登录</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'pinia'
	import {
		useUserStore
	} from '@/stores/user'
	export default {
		data() {
			return {
				userInfo: {
					nickname: '张三'
				}
			}
		},
		onLoad() {
			console.log(this.userInfo);
			console.log(this.userInfo1);
		},
		methods: {
			handleClickTopNav(urlName) {
				console.log(urlName);
				if (urlName==='logout') {
					uni.removeStorageSync('token')
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/user/'+ urlName
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.top-bg {
		position: absolute;
		top: 0;
		width: 100vw;
		height: 150px;
		background: url("@/static/bg2.png");
	}

	.user-avatar {
		position: absolute;
		border-top-right-radius: 50%;
		border-top-left-radius: 50%;
		position: relative;
		height: 150px;
		width: 120vw;
		top: 80px;
		left: 50vw;
		margin-left: -60vw;
		background: #ffffff;
		display: flex;
		justify-content: center;
	}

	.user-avatar-img {
		height: 100px;
		width: 100px;
		margin-top: -50px;
		border-radius: 50%;
		overflow: hidden;
		border: 5px solid #cccccc;
		display: block;
		position: relative;
	}

	.user-name {
		position: relative;
		z-index: 2;
		text-align: center;
		margin-top: -20;
	}

	.user-top-nav1 {

		padding: 0 16px;
		margin-top: 10px;
		z-index: 2;
		display: flex;
		justify-content: space-between;


	}

	.user-top-nav1>view {
		overflow: hidden;
		position: relative;
		height: 60px;
		width: calc(50% - 25px);
		border-radius: 10px;
		z-index: 10;
		padding: 10px;

		.bg2 {
			width: 90px;
			height: 90px;
			background: #ffffff;
			position: absolute;
			border-radius: 50%;
			top: -30px;
			right: -10px;
			opacity: .2;
		}
	}
	.menu-list{
		padding: 16px;
	}
</style>